<!-- 带颜色的表格 -->
<template lang="pug">
div
  g-h(v-if="isLoading" j-c="center" a-i="center")
    icon-loading.loading

  table.table(v-else)
    thead.thead
      tr
        th.th(
            v-for="(item, i) in headList"
            :key="i"
            v-if="item.checked"
            ) {{ item.title }}
    tbody(v-if="body && body.list")
      tr(
          v-for="(row, i) in body.list.slice().reverse()"
          :key="row.BarcodeData"
          @click="$emit('click-row')"
          :style="rowStyle(row.BarcodeData)"
          )
        td.td(
            v-for="(field, j) in checkedHeadList"
            :key="j"
            )
          template(v-if="row[field] != undefined")
            input.input(
                v-if="inputHeader[field]"
                v-model="row[field]"
                @click.stop=""
                :disabled="disabled"
                )
            img(
                v-else-if="field === 'delete-row'"
                src="img/delete-red.svg"
                width="20"
                @click="$emit('delete-row', row.BarcodeData)"
                )
            div(v-else) {{ row[field] }}
          div(v-else)
</template>

<script>
/*
  事件
    click-row     点击一行
    delete-row    删除一行
*/

import util from "$util"

export default {
  name: "ColoredTable",
  props: {
    /* 
      表头列表
      示例:
      [
        { field: "name", title: "合同名称", checked: true, isInput: true },
        { field: "id", title: "合同ID", checked: false },
        { field: "code", title: "合同编号", checked: true },
      ]
    */
    headList: {
      type: Array,
      default: () => [],
    },

    /* 
      表格数据
      示例:
      {
        list: [
          { userRealName: "", id: 123 },
        ],
      }
    */
    body: {
      type: Object,
      default: () => {},
    },

    // 存储状态的map
    // 扫电池码的时候用
    statusMap: {
      type: Object,
      default: () => {},
    },

    // 是否显示载入中
    isLoading: {
      type: Boolean,
      default: false,
    },

    // 是否禁用输入框
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    }
  },
  computed: {
    checkedHeadList() {
      let checked = []
      for (let item of this.headList) {
        if (item.checked) {
          checked.push(item.field)
        }
      }
      return checked
    },
    inputHeader() {
      let m = {}
      for (let item of this.headList) {
        if (item.isInput) {
          m[item.field] = true
        }
      }
      return m
    },
  },
  methods: {
    rowStyle(code) {
      if (!this.statusMap) {
        return {}
      }
      switch (this.statusMap[code]) {
        case util.STATUS_OK:
          return {
            background: "#81C784", // green300
          }
          break
        case util.STATUS_ERROR:
          return {
            background: "#FFF176", // yellow300
          }
          break
      }
      return {}
    },
  },
}
</script>

<style lang="stylus" scoped>

.c-root
  height: 100%
  overflow: scroll
  &::-webkit-scrollbar
    display: none

.loading
  margin: 0.5rem 0

.table
  table-layout: fixed
  border-collapse: collapse
  box-shadow: 0 1px 5px grey500

.thead
  table-head()

.th
  color: grey600

.th, .td
  padding: 0.5rem 1rem
  // border: 1px solid grey300
  max-width: 20rem
  text-align: center
  // white-space: nowrap
  text-ellipsis()

.input
  width: 100%
  text-align: end

</style>
